<template>
  <scroll class="listview"
          :data="data"
          ref="listview"
          :listenScroll="listenScroll"
          @scroll="scroll"
          :probeType="probeType">
    <ul>
      <li v-for="group in data" class="list-group" :key="group.title" ref="listgroup">
        <h2 class="list-group-title">{{group.title}}</h2>
        <ul>
          <li v-for="item in group.items" class="list-group-item" :key="item.name" @click="selectItem(item)">
            <img v-lazy="item.avatar" alt="" class="avatar">
            <span class="name">{{item.name}}</span>
          </li>
        </ul>
      </li>
    </ul>
    <div class="list-shortcut" @touchstart="onShortcutTouchStart" @touchmove.stop.prevent="onShortcutTouch">
      <ul>
        <li v-for="(item, index) in shortcutList" class="item" :class="{'active':currentIndex===index}" :data-index="index" :key="item+index">
          {{item}}
        </li>
      </ul>
    </div>
    <div class="fix-title" ref="fixTitle" v-show="currentTitle">
      <h2>{{currentTitle}}</h2>
    </div>
    <!-- 加载动画 -->
    <div class="loading-content" v-show="!data.length">
      <loading></loading>
    </div>
  </scroll>
</template>

<script>
import Scroll from 'base/scroll/scroll'
import {dataAttr} from 'common/js/dom'
import Loading from 'base/loading/loading'

// 每个anchor的高度
const ANCHOR_HEIGHT = 18
// 每个title的高度
const TITLE_HEIGHT = 30

export default {
  name: 'listview',
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  components: {Scroll, Loading},
  computed: {
    shortcutList () {
      return this.data.map((item) => item.title.substring(0, 1))
    },
    currentTitle () {
      if (this.scrollY > 0) {
        return ''
      }
      return this.data[this.currentIndex] ? this.data[this.currentIndex].title : ''
    }
  },
  created () {
    this.touch = {}
    this.listenScroll = true
    this.listHeight = []
  },
  data () {
    return {
      scrollY: -1, // 滚动Y轴位置
      currentIndex: 0, // 快速导航高亮的index
      probeType: 3, // 滚动事件监听级别， 3表示实时监听
      diff: -1 // 切换fix-title时，currentTitle与fix-title的距离
    }
  },
  methods: {
    onShortcutTouchStart (e) {
      let anchorIndex = dataAttr(e.target, 'index')
      let firstTouch = e.touches[0]
      this.touch.y = firstTouch.pageY
      this.touch.anchorIndex = anchorIndex
      this._scrollToIndex(anchorIndex)
    },
    onShortcutTouch (e) {
      let firstTouch = e.touches[0]
      this.touch.y2 = firstTouch.pageY
      let delta = (this.touch.y2 - this.touch.y) / ANCHOR_HEIGHT | 0
      let finalIndex = parseInt(this.touch.anchorIndex) + delta
      this._scrollToIndex(finalIndex)
    },
    scroll (pos) {
      this.scrollY = pos.y
    },
    selectItem (item) {
      this.$emit('select', item)
    },
    _calculateHeight () {
      this.listHeight = []
      const list = this.$refs.listgroup
      let height = 0
      this.listHeight.push(height) // 第0个元素的起始高度为0
      for (var i in list) {
        let item = list[i]
        height += item.clientHeight
        this.listHeight.push(height)
      }
    },
    _scrollToIndex (index) {
      this.$refs.listview.scrollToElement(this.$refs.listgroup[index], 0)
    },
    refresh () {
      this.$refs.listview.refresh()
    }
  },
  watch: {
    data () {
      setTimeout(() => {
        this._calculateHeight()
      }, 20)
    },
    scrollY (newVal) {
      // newVal就是滑动的距离，负值表示向上滑(listgroup向下滚)
      const list = this.listHeight
      // 滚动到顶部
      if (newVal > 0) {
        this.currentIndex = 0
        return
      }
      // 中间部分
      for (let i = 0, len = list.length; i < len - 1; i++) {
        const curHeight = list[i]
        const nextHeight = list[i + 1]
        if ((-newVal >= curHeight && -newVal < nextHeight)) {
          this.currentIndex = i
          this.diff = nextHeight + newVal
          return
        }
      }
      // 滚动到底部
      this.currentIndex = list.length - 2 // 因为list[0]是增加进去的初始高度0
    },
    diff (newVal) {
      const transY = (newVal < TITLE_HEIGHT && newVal >= 0) ? newVal - TITLE_HEIGHT : 0
      this.$refs.fixTitle.style.transform = `translate3d(0,${transY}px,0)`
    }
  }
}
</script>

<style lang="less" scoped>
  @import '~common/css/variable';
  .listview {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: @color-background;
    .list-group {
      padding-bottom: 30px;
      .list-group-title {
        height: 30px;
        line-height: 30px;
        padding-left: 20px;
        font-size: @font-size-small;
        color: @color-text-l;
        background: @color-highlight-background;
      }
      .list-group-item {
        display: flex;
        align-items: center;
        padding: 20px 0 0 30px;
        .avatar {
          width: 50px;
          height: 50px;
          border-radius: 50%;
        }
        .name {
          margin-left: 20px;
          color: @color-text-l;
          font-size: @font-size-medium;
        }
      }
    }
    .list-shortcut{
      position: absolute;
      right: 1px;
      top: 50%;
      transform: translate3d(0,-50%,0);
      display: flex;
      flex-direction: column;
      background: @color-highlight-background;
      border-radius: 10px;
      padding: 5px 0;
      .item {
        font-size: @font-size-small;
        text-align: center;
        color: @color-text-l;
        margin: 6px 3px;
        &.active {
          color: @color-theme
        }
      }
    }
    .fix-title {
      position: absolute;
      top: 0;
      width: 100%;
      .list-group .list-group-title();
    }
  }
</style>
